<template>
    <div class="mine_parent">
        <div class="avatar" @click="toProfile">
            <div class="username">
                <div class="left">
                    <van-image round width="3rem" height="3rem"
                        src="https://img0.baidu.com/it/u=3631403597,4116347853&fm=253&app=138&f=JPEG?w=500&h=500" />
                </div>
                <div class="right" style="margin-left: 10px;">
                    <div style="font-weight: bold;font-size: 14px;font-family:'楷体';">李根</div>
                    <div>
                        <van-button size="small" style="height:20px;" plain round type="default">Lv8.0</van-button>
                    </div>
                </div>
            </div>
            <div class="icon">
                <van-icon name="arrow" size="20" />
            </div>
        </div>
        <div class="grid" style="margin-top: 20px;">
            <van-grid square :border="false">
                <van-grid-item icon-color="red" v-for="item in gridList" :key="item.id" :icon="item.icon"
                    :text="item.text" @click="gridClick(item.path)" />
            </van-grid>
        </div>
        <div class="music" @click="toPlaylist('like')">
            <div class="left" style="display: flex;">
                <div class="icon">
                    <van-icon name="like" color="#fff" />
                </div>
                <div class="text" style="margin-left:10px;">
                    <div style="font-weight: bold;margin-bottom: 6px;">我喜欢的音乐</div>
                    <div style="color: #736d6d;font-size: 12px;">666首</div>
                </div>
            </div>
            <div class="right">
                <van-button size="mini" icon="fire" plain round type="danger" class="heartbeat-btn">心动模式</van-button>
            </div>
        </div>
        <div class="card" style="margin-top: 10px;">
            <van-tabs v-model:active="active" animated color="red" background="#f4f4f4">
                <van-tab title="创建歌单" name="a">
                    <div class="tab">
                        <div class="top">
                            <div class="left" style="font-size: 12px;color: #736d6d;">创建歌单({{ playList.length }}个)</div>
                            <div class="right">
                                <van-icon name="plus" :color="isDark ? '#fff' : '#736d6d'" size="18"
                                    @click.stop="openCreate" style="cursor:pointer" />
                                <van-icon name="bars" :color="isDark ? '#fff' : '#736d6d'" size="18"
                                    style="margin-left: 5px;"></van-icon>
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList" :key="item.id" @click="toPlaylist(item.id)">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url" alt="">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="font-size: 12px;color: #736d6d;margin-top: 3px;">{{ item.num }}首</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="收藏歌单" name="b">
                    <div class="tab">
                        <div class="top">
                            <div class="left" style="font-size: 12px;color: #736d6d;">收藏歌单({{ collectList.length }}个)
                            </div>
                            <div class="right">
                                <van-icon name="bars" :color="isDark ? '#fff' : '#736d6d'" size="18"
                                    style="margin-left: 5px;"></van-icon>
                            </div>
                        </div>
                        <div class="bottom" v-for="item in collectList" :key="item.id" @click="toPlaylist(item.id)">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url" alt="">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="font-size: 12px;color: #736d6d;margin-top: 3px;">{{ item.num }}首,by {{
                                    item.author }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="歌单助手" name="c">
                    <div class="tab" style="text-align: center;padding: 20px;color: #736d6d;">
                        <div><van-icon name="question-o" size="50"></van-icon></div>
                        <div style="margin-top: 10px;">什么是歌单助手?</div>
                        <div style="margin-top: 10px;">同步和管理你收藏的歌单</div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <van-dialog v-model:show="showCreate" title="新建歌单" show-cancel-button @confirm="createPlaylist">
            <div style="padding:16px;">
                <van-field v-model="newName" label="歌单名" placeholder="请输入歌单名称" maxlength="20" />
                <van-radio-group v-model="newType" direction="horizontal" style="margin-top:12px;">
                    <van-radio name="public">公开</van-radio>
                    <van-radio name="private">私密</van-radio>
                </van-radio-group>
            </div>
        </van-dialog>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const active = ref('a');
const isDark = computed(() => document.documentElement.classList.contains('dark'))
const showCreate = ref(false)
const newName = ref('')
const newType = ref('public')
const gridList = ref([
    { id: 1, icon: "shop", text: '本地音乐', path: '/localmusic' },
    { id: 2, icon: "shop-collect", text: '云盘', path: '/clouddisk' },
    { id: 3, icon: "goods-collect", text: '已购', path: '/purchased' },
    { id: 4, icon: "play-circle", text: '最近播放', path: '/recentplay' },
    { id: 5, icon: "friends", text: '我的关注', path: '/myfollowing' },
    { id: 6, icon: "star", text: '收藏和赞', path: '/favorites' },
    { id: 7, icon: "volume", text: '我的播客', path: '/mypodcast' },
    { id: 8, icon: "music", text: '音乐应用', path: '/musicapp' },
]);
const playList = ref([
    { id: 1, url: "https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg", name: '90后回忆录', num: '30' },
    { id: 2, url: "https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name: '车载音乐', num: '50' },
    { id: 3, url: "https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg", name: '助眠神曲', num: '70' },
    { id: 4, url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe8c11d4b-6493-4b80-b67e-f6f09b1ab535%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754440754&t=4c9bd74c826f9c532b8e560ad792dee0", name: '华语经典', num: '45' },
    { id: 5, url: "https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800", name: '欧美流行', num: '38' },
    { id: 6, url: "https://ww4.sinaimg.cn/mw690/e3ac65d8ly1i10ffn99znj21kw1kwx6r.jpg", name: '日韩精选', num: '25' },
    { id: 7, url: "https://img0.baidu.com/it/u=1690645711,3802890272&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name: '轻音乐', num: '60' },
    { id: 8, url: "https://img2.baidu.com/it/u=773021685,2881662099&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name: '古风歌曲', num: '42' },
    { id: 9, url: "https://img2.baidu.com/it/u=3519959920,938418379&fm=253&fmt=auto&app=138&f=JPEG?w=665&h=500", name: '民谣精选', num: '33' },
    { id: 10, url: "https://imge.kugou.com/stdmusic/20150715/20150715221332210510.jpg", name: '摇滚经典', num: '28' }
]);
const toPlaylist = (id) => {
    if (id === 'like') {
        router.push({ path: `/playlist/like` });
    } else {
        router.push({ path: `/playlist/${id}` });
    }
}
const gridClick = (path) => {
    router.push(path);
}
const collectList = ref([
    { id: 1, url: "https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name: '[一周日语]听觉盛宴', num: '50', author: '奈奈' },
    { id: 2, url: "https://pic4.zhimg.com/v2-5b9de1d48ee943f3c8fde04035a58bd5_r.jpg", name: '[ACG]那些刻在DNA里的旋律', num: '100', author: '动漫' },
    { id: 3, url: "https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name: '[华语]经典老歌回忆杀', num: '80', author: '音乐达人' },
    { id: 4, url: "https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg", name: '[欧美]流行音乐精选', num: '65', author: '欧美控' },
    { id: 5, url: "https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg", name: '[古风]中国风音乐合集', num: '45', author: '古风爱好者' },
    { id: 6, url: "https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800", name: '[电音]动感舞曲派对', num: '120', author: '电音DJ' },
    { id: 7, url: "https://img0.baidu.com/it/u=2030267494,2401277417&fm=253&app=138&f=JPEG?w=817&h=800", name: '[民谣]温暖治愈系', num: '38', author: '民谣小王子' },
    { id: 8, url: "https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800", name: '[摇滚]经典摇滚乐', num: '55', author: '摇滚青年' },
    { id: 9, url: "https://img0.baidu.com/it/u=377267631,2990999101&fm=253&app=138&f=JPEG?w=760&h=760", name: '[轻音乐]放松心情', num: '72', author: '轻音乐' },
    { id: 10, url: "https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800", name: '[抖音]爆款热歌合集', num: '200', author: '抖音达人' }
]);
const toProfile = () => {
    router.push('/profile');
}
function openCreate() {
    showCreate.value = true
    newName.value = ''
    newType.value = 'public'
}
function createPlaylist() {
    if (!newName.value.trim()) return
    playList.value.push({
        id: Date.now(),
        url: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg',
        name: newName.value,
        num: '0',
        type: newType.value
    })
    showCreate.value = false
}
</script>
<style lang="less" scoped>
.mine_parent {
    height: calc(100vh - 32px);
    background-color: var(--custom-mine-bg, #f4f4f4);
    padding: 10px;
    color: var(--custom-mine-text, #222);
    transition: background 0.3s, color 0.3s;

    .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .username {
            display: flex;
        }
    }

    .grid {
        border-radius: 10px;
        overflow: hidden;
        background: var(--custom-mine-card-bg, #fff);
    }

    .music {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        background-color: var(--custom-mine-card-bg, #fff);
        padding: 10px;
        border-radius: 5px;

        .icon {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background-image: url(https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800);
            background-size: 100% 100%;
        }

        .text {
            color: var(--custom-mine-text, #222);
        }
    }

    .card {
        background-color: var(--custom-mine-card-bg, #fff);

        .tab {
            padding: 5px;
            padding-bottom: 80px;

            .top {
                padding: 10px;
                display: flex;
                justify-content: space-between;
                color: var(--custom-mine-subtext, #736d6d);
            }

            .bottom {
                padding: 10px;
                display: flex;

                .left {
                    margin-right: 10px;

                    img {
                        border-radius: 5px;
                    }
                }

                .right {
                    color: var(--custom-mine-text, #222);
                }
            }
        }
    }
}

.heartbeat-btn {
    color: #fff !important;
    border-color: #f56c6c !important;
    background-color: #f56c6c !important;
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
    line-height: 22px;
}

.heartbeat-btn:hover {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
}

/* 暗色模式下的心动模式按钮 */
:root.dark .heartbeat-btn {
    color: #fff !important;
    border-color: #f56c6c !important;
    background-color: #f56c6c !important;
}

:root.dark .heartbeat-btn:hover {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
}
</style>